.section1 {
    position: relative;
    top: 0;
    height:auto;
}

.faixa {
    position: relative;
    top: 0;
    background: rgb(5,28,44);
    background: linear-gradient(180deg, rgba(5,28,44,1) 0%, rgba(2,18,29,0.36182598039215685) 54%, rgba(1,12,19,0) 90%);
    height: 50vw;
    margin-bottom: -50vw;
    z-index: 1;
}

.banner {
    position: relative;
    top: 0vw;
    width: 100vw;
    z-index: 0;
}

.logobanner {
    position: relative;
    top: -48vw;
    left: 55vw;
    height: 47vw;
    margin-bottom: -47vw;
    width: auto;
    z-index: 0;
}

.t1 {
    position: relative;
    top: -35vw;
    left: 58vw;
    font-family: 'Open Sans';
    font-weight: 800;
    font-size: 1.2rem;
    color: #009fe3;
    z-index: 2;
    width: 30vw;
}

.t2 {
    position: relative;
    top: -35vw;
    left: 58vw;
    font-family: 'Open Sans';
    font-weight: 300;
    font-size: 3.2rem;
    width: 35vw;
    color: #ffffff;
    z-index: 2;
    margin-bottom: -13.6vw;
}

.btn2font {
    font-family: 'Open Sans';
    font-size: 1rem;
}
.btn2 {
position: relative;
top: -20vw;
left: 58vw;
background-color: transparent;
border: 0.1vw solid #ffffff;
width: 22.8vw;
height: 3.5vw;
border-radius:  0.5vw;
box-sizing: border-box;
color: hsl(0, 0%, 100%);
font-family: 'Open Sans';
font-weight: 600;
cursor: pointer;
display: inline-block;
line-height: 1px;
text-align: center;
transition: all .1s cubic-bezier(.4, 0, .2, 1);
box-shadow: 0px 1px 2px rgba(166, 175, 195, 0.25);
touch-action: manipulation;
z-index: 2;
}

.btn2:hover {
background-color: #f1f1f1;
color: #000000;
}

.section2 {
    position: relative;
    top: -1vw;
    height: auto;
    background-color: #051c2c;
}

.s1 {
    position: relative;
    top: 3vw;
    left: 5vw;
    font-family: 'Open Sans';
    font-weight: 600;
    font-size: 1.5rem;
    width: 60vw;
    color: #ffffff;
    margin-bottom: 1vw;

}

.s2 {
    position: relative;
    top: 0vw;
    left: 0vw;
    font-family: 'Open Sans';
    font-weight: 300;
    font-size: 2.5rem;
    width: 60vw;
    color: #ffffff;
    margin-bottom: 2vw;

}

.s3 {
    position: relative;
    top: 2vw;
    left: 5vw;
    font-family: 'Open Sans';
    font-weight: 300;
    font-size: 1.1rem;
    width: 89vw;
    text-align: justify;
    color: #ffffff;
    margin-bottom: 3vw;

}

.buttonfont {
    font-size: 1rem;
}
.button-2 {
position: relative;
top: 2vw;
left: 5vw;
background-color: #fff;
border: 0 solid #000000;
width: 16rem;
height: 3.5rem;
border-radius:  0.5vw;
box-sizing: border-box;
color: #0d172a;
font-family: 'Open Sans';
font-weight: 600;
cursor: pointer;
display: inline-block;
line-height: 1px;
text-align: center;
transition: all .1s cubic-bezier(.4, 0, .2, 1);
box-shadow: 0px 1px 2px rgba(166, 175, 195, 0.25);
touch-action: manipulation;
margin-bottom: 5.5vw;
}

.button-2:hover {
background-color: #005aeb;
color: #fff;
}

.section3 {
    position: relative;
    height: auto;
}

.p1 {
    position: relative;
    top: 3vw;
    left: 0;
    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 2.5rem;
    width: 95vw;
    text-align: center;
    color: #000000;

}

.p2 {
    position: relative;
    top: 3vw;
    left: 0;
    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 1.5rem;
    width: 95vw;
    text-align: center;
    color: #323232;

}

.btnfont {
    font-size: 0.8rem;
    font-weight: 600;
}

.btn {
position: relative;
top: 5vw;
left: 3.5vw;
background-color: #fff;
border: 0.1vw solid #454545;
width: 22vw;
height: 2.5vw;
border-radius:  0.5vw;
box-sizing: border-box;
color: hsl(0, 0%, 0%);
font-family: 'Open Sans';
font-weight: 600;
cursor: pointer;
display: inline-block;
line-height: 1px;
text-align: center;
transition: all .1s cubic-bezier(.4, 0, .2, 1);
box-shadow: 0px 1px 2px rgba(166, 175, 195, 0.25);
touch-action: manipulation;
margin-bottom: 1.5vw;
svg {
    height: 2.8vw;
    left: -0.21vw;
    position: absolute;
    top: -0.2vw; 
    width: 22.3vw; 
    border-radius: 0.8vw;
  }

}

.animation {
      rect {
        fill: none;
        stroke: #112241;
        stroke-width: 0.3vw;
        stroke-dasharray: 0vw, 20vw;
        stroke-dashoffset: -0vw;
        /*transition: all 3s cubic-bezier(0.19, 1, 0.22, 1);*/
        animation: animationbtn 12s infinite;
      }
}

.btn:hover {
background-color: #f1f1f1;
color: #000000;
    /*rect {
        stroke-width: 0.3vw;
        stroke-dasharray: 422, 0;
        transition: all 5s linear;
  }*/
}

@keyframes animationbtn {
    0%{
        stroke-dasharray: 0vw, 20vw;
    }
    100%{
        stroke-dasharray: 422, 0;
    }
}


.active:hover {
    background-color: rgb(1, 16, 26);
    color: #ffffff;
}


.active {
    background-color: rgb(5,28,44);
    color: #ffffff;
}

.botoes {
    position: relative;
    top: 2vw;
    left: 1vw;
    display: flex;
    flex-direction: column;
    width: 30vw;
}

.box {
    position: relative;
    top: -20.9vw;
    left: 29vw;
    width: 66vw;
    height: auto;
    margin-bottom: -10vw;
}

.box1 {
    position: relative;
    display: block;
    width: 66vw;
    height: 30vw;
}

.box2 {
    position: relative;
    display: none;
    width: 66vw;
    height: 30vw;
}

.box3 {
    position: relative;
    display: none;
    width: 66vw;
    height: 30vw;
}

.box4 {
    position: relative;
    display: none;
    width: 66vw;
    height: 30vw;
}

.box5 {
    position: relative;
    display: none;
    width: 66vw;
    height: 30vw;
}

.box6 {
    position: relative;
    display: none;
    width: 66vw;
    height: 30vw;
}

.box7 {
    position: relative;
    display: none;
    width: 66vw;
    height: 30vw;
}

.box8 {
    position: relative;
    display: none;
    width: 66vw;
    height: 30vw;
}


.imagemseg {
    position: relative;
    height: 26.5vw;
    border-top-left-radius: 1vw;
    border-top-right-radius: 1vw;
}

.tituloseg {
    position: relative;
    top: -27vw;
    left: 41.8vw;
    font-family: 'Open Sans';
    font-weight: 600;
    font-size: 1.7rem;
    color: #000000;
    width: 26vw;
    text-align: left;
}

.subtituloseg {
    position: relative;
    top: -26vw;
    left: 41.8vw;
    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 1.1rem;
    color: #3d3d3d;
    width: 26vw;
    text-align: left;
}

@media (max-width: 768px) {
    * {
        max-width: 100vw;
    }

    .banner {
        overflow: hidden;
        max-width: none;
        height: 70vh;
        width: auto;
        left: -300px;
    }

    .bannermobile {
        overflow: hidden;
    }

    .logobanner {
        display: none;
    }

    .faixa {
        height: 70vh;
        margin-bottom: -70vh;
    }

    .t1 {
        top: 10vh;
        left: 10vw;
        width: 80vw;
        text-align: center;
        font-size: 1rem;
        margin-top: -70vh;
    }

    .t2 {
        top: 10vh;
        left: 10vw;
        width: 80vw;
        text-align: center;
        font-size: 2rem;
    }
    
    .btn2 {
        top: 20vh;
        left: 10vw;
        width: 80vw;
        height: 10vw;
        background: #ffffff1b;
        margin-bottom: 43vh;
    }

    .btn2font {
        font-size: 0.8rem;
    }

    .s1 {
        top: 4vw;
        font-size: 1.5rem;
    }

    .s2 {
        top: 0vw;
        font-size: 2rem;
    }

    .s3 {
        top: 6vw;
        font-size: 1rem;
    }

    .section2 {
        height: auto;
    }

    .button-2 {
        top: 13vw;
        left: 7vw;
        width: 86vw;
        height: 8vw;
        margin-bottom: 22vw;
    }

    .buttonfont {
        font-size: 0.8rem;
    }

    .p1 {
        font-size: 2rem;
        left: 7vw;
        width: 86vw;
    }

    .p2 {
        font-size: 1rem;
        left: 7vw;
        width: 86vw;
    }

    .section3 {
        height: auto;
    }

    .btn {
        width: 43.8vw;
        margin-right: 3vw;
        margin-bottom: 3vw;
        height: 8vw;
        font-size: 3vw;
        svg {
            height: 8.3vw;
            left: -0.21vw;
            position: absolute;
            top: -0.2vw; 
            width: 44.1vw; 
            border-radius: 0.8vw;
          }
    }

    .btnfont {
        font-size: 2.5vw;
    }

    .animation {
        rect {
          fill: none;
          stroke: #112241;
          stroke-width: 0.6vw;
          stroke-dasharray: 0vw, 20vw;
          stroke-dashoffset: -0vw;
          /*transition: all 3s cubic-bezier(0.19, 1, 0.22, 1);*/
          animation: animationbtn 12s infinite;
        }
  }



    .botoes {
        left: 1vw;
        width: 96vw;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        margin-bottom: -30vw;
    }

    .box {
        left: 5vw;
        top: 38vw;
        width: 86vw;
        margin-bottom: 120vw;
    }
    

    .imagemseg {
        top: 0vw;
        width: 90vw;
        height: auto;
    }

    .tituloseg {
        left: 0vw;
        top: 2vw;
        border: 0px solid #000000;
        width: 90vw;
        font-size: 5vw;
    }

    .subtituloseg {
        left: 0vw;
        top: 4vw;
        border: 0px solid #000000;
        width: 90vw;
        font-size: 3.5vw;
        text-align: justify;
    }
}